<template>
	<div class="container">
		<header class="head">
			<!-- 如果输入了一个自定义的标签，那么浏览器渲染这个标签的时候的display就为inline,也就是一个行元素 -->
			<slot name="head"></slot>
		</header>
		<div class="mid">
			<div class="left">
				<slot name="left"></slot>
			</div>
			<div class="right">
				<slot name="right" class="content"></slot>
			</div>
		</div>
	</div>
</template>

<script>
	export default {

	}
</script>

<style scoped>
	.container {
		position: fixed;
		/* container的位置是固定的 */
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}

	.head {
		width: 100%;
		height: 50px;
		top: 0;
		left: 0;
		position: absolute;
		z-index: 1;
		/* 将head的position设置为absolute，再将z-index设置为1，就能够实现head在最上面
		 mid在下面，这样就不会覆盖阴影了*/
		box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.15);
		/* 设置元素的阴影样式 */
		/* 第一个值是偏移量（向右为正，向右为负）、第二个值是偏移量（向下为正，向上为负）、
		第三个值是模糊程度（向右为正，向右为负）、第四个值为阴影颜色，一般用rgba(0,0,0,0.5),其中0.5为透明度 */
	}

	.mid {
		position: absolute;
		/* 元素的位置是绝对的 */
		top: 50px;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.left {
		float: left;
		width: 250px;
		height: 100%;
	}

	.right {
		overflow: hidden;
		background: #E7E7E7;
		height: 100%;
		padding-top: 50px;
		padding-left: 200px;
		padding-right: 200px;
	}
</style>
